<template>
	<view class="main bgfff heightTran" :class="[(isShow) ? 'autoHei' : '']"
		:style="{'height': ((isShow) ? mainHeight + 'px' : '0px')}">
		<view id="header" class="tab gui-flex gui-space-between">
			<view class="tab_item" @tap="tabChange(index)" v-for="(tabItem,index) in tabList" :key="tabItem.id">
				<text class="f24 c999" :class="{'colorBlue': index == tabIndex}">{{tabItem.name}}</text>
				<text class="gui-icons c999"
					:class="{'colorBlue': index == tabIndex}">{{(index == tabIndex) ? '&#xe647;' : '&#xe661;'}}</text>
			</view>
		</view>
		<view class="option_box gui-flex" :style="{'height': mainHeight - 90 + 'px'}">
			<view class="class_left">
				<view class="option f24" :class="{'active': currentIndex == index}" @tap="change(index)"
					v-for="(item,index) in dataList[tabIndex]" :key="index">
					{{item.name}}
				</view>
			</view>
			<view class="class_right">
				<view class="option f24 c999" :class="{'active': cItem.checked}" @tap="childChange(cItem)"
					v-for="(cItem,cIndex) in dataList[tabIndex][currentIndex].child" :key="cIndex">
					{{cItem.dictLabel}}
					<text class="gui-icons colorBlue" v-if="cItem.checked">&#xe60f;</text>
				</view>
			</view>
		</view>
		<view class="footer f24 gui-bold">
			<view class="btn_item cfff" @tap="reset">
				清空
			</view>
			<view class="btn_item cfff" @tap="confirm">
				确定
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		inject,
		onMounted
	} from 'vue'
	import graceJS from "@/Grace6/js/grace.js"
	const emit = defineEmits(['change', 'confirm'])
	import {
		getSysDictTypeList,
		selectOneGradeList
	} from '@/api/config.js';

	const props = defineProps({
		mainHeight: {
			type: Number,
			default: ""
		}
	})
	onMounted(() => {
		loadZd();
	})
	const $u = reactive(inject('$u'))
	const isShow = ref(false);
	const tabIndex = ref(0)
	const currentIndex = ref(0)
	const checkVal = ref([]) // 选中的数据
	const tabList = ref([{
		name: '工作地址',
		value: 1
	}, {
		name: '职业行业',
		value: 2
	}, {
		name: '公司性质',
		value: 3
	}, {
		name: '岗位要求',
		value: 4
	}])

	const dataList = ref(
		[
			[{
				id: 1,
				name: '江苏省徐州市',
				key: 'workArea',
				child: []
			}],
			[{
				id: 2,
				name: '行业',
				key: 'industry',
				child: []
			}],
			[{
				id: 3,
				name: '公司规模',
				key: '',
				child: []
			}],
			[{
				id: 5,
				name: '岗位工资',
				key: 'postMoney',
				child: []
			}, {
				id: 6,
				name: '年龄要求',
				key: 'age',
				child: []
			}, {
				id: 7,
				name: '学历要求',
				key: '',
				child: []
			}, {
				id: 8,
				name: '经验要求',
				key: 'work',
				child: []
			}, {
				id: 9,
				name: '岗位性质',
				key: '',
				child: []
			}, {
				id: 10,
				name: '残疾等级',
				key: 'physicalContext',
				child: []
			}, {
				id: 11,
				name: '残疾类别',
				key: 'welfareContext',
				child: []
			}]
		]
	)
	// 工作区域
	const workAreaArr = ref([])
	// 行业
	const professionArr = ref([])
	// 公司规模
	const numUserArr = ref([])
	// 岗位薪资 com_salary
	const salaryArr = ref([])
	// 年龄 com_age
	const ageArr = ref([])
	// 学历
	const educationArr = ref([])
	// 工作经验
	const workArr = ref([])
	// 工作性质
	const workStatusArr = ref([])
	// 残疾等级 com_disability_level
	const disabilityLevelArr = ref([])
	// 残疾类别 com_physical_type
	const physicalTypeArr = ref([])
	const loadZd = () => {
		
		selectOneGradeList().then(res => {
			let list = res.data.map(e => {
				let child = e.listGrade.map(c => {
					return {
						dictLabel: c.twoName,
						id: c.id
					}
				})
				return {
					id: e.id,
					name: e.oneName,
					key: 'industry',
					child
				}
			})
			console.log(list);
			dataList.value[1] = list;
			
			getSysDictTypeList({
				dictType: ''
			}).then(res => {
				let result = res.data;
				workAreaArr.value = [];
				professionArr.value = [];
				numUserArr.value = [];
				salaryArr.value = [];
				ageArr.value = [];
				educationArr.value = [];
				workArr.value = [];
				disabilityLevelArr.value = [];
				physicalTypeArr.value = [];
			
				result.forEach(item => {
					// 工作区域
					if (item.dictType == 'com_work_area') {
						workAreaArr.value.push(item)
					}
					// 行业
					if (item.dictType == 'com_industry') {
						professionArr.value.push(item)
					}
					// 公司规模
					if (item.dictType == 'com_num_user') {
						numUserArr.value.push(item)
					}
					// 岗位薪资
					if (item.dictType == 'com_salary') {
						salaryArr.value.push(item)
					}
					// 年龄要求
					if (item.dictType == 'com_age') {
						ageArr.value.push(item)
					}
					// 学历
					if (item.dictType == 'com_school') {
						educationArr.value.push(item)
					}
					// 工作经验
					if (item.dictType == 'com_work_time') {
						workArr.value.push(item)
					}
					// 求职状态
					if (item.dictType == 'com_work_status') {
						workStatusArr.value.push(item)
					}
					// 残疾等级
					if (item.dictType == 'com_disability_level') {
						disabilityLevelArr.value.push(item)
					}
					// 残疾类别
					if (item.dictType == 'com_physical_type') {
						physicalTypeArr.value.push(item)
					}
				})
				// 区域
				const workAreaList = JSON.parse(JSON.stringify(workAreaArr.value))
				dataList.value[0][0].child = workAreaList;
				// 职业行业
				// const professionList = JSON.parse(JSON.stringify(professionArr.value))
				// dataList.value[1][0].child = professionList;
				// 公司规模
				const numUserList = JSON.parse(JSON.stringify(numUserArr.value))
				dataList.value[2][0].child = numUserList;
				// 岗位薪资
				const salaryList = JSON.parse(JSON.stringify(salaryArr.value))
				dataList.value[3][0].child = salaryList;
				// 年龄要求
				const ageList = JSON.parse(JSON.stringify(ageArr.value))
				dataList.value[3][1].child = ageList;
				// 学历要求
				const educationList = JSON.parse(JSON.stringify(educationArr.value))
				dataList.value[3][2].child = educationList;
				// 工作经验
				const workList = JSON.parse(JSON.stringify(workArr.value))
				dataList.value[3][3].child = workList;
				// 岗位性质
				const workStatusList = JSON.parse(JSON.stringify(workStatusArr.value))
				dataList.value[3][4].child = workStatusList;
				// 残疾等级
				const disabilityLevelList = JSON.parse(JSON.stringify(disabilityLevelArr.value))
				dataList.value[3][5].child = disabilityLevelList;
				// 残疾类别
				const physicalTypeList = JSON.parse(JSON.stringify(physicalTypeArr.value))
				dataList.value[3][6].child = physicalTypeList;
			
			})
		})
	}

	const open = () => {
		isShow.value = true;
	}

	const close = () => {
		isShow.value = false;
	}

	const tabChange = (index) => {
		tabIndex.value = index;
		currentIndex.value = 0;
	}

	const change = (index) => {
		currentIndex.value = index;
	}

	const clearCheck = () => {
		checkVal.value = [];
		dataList.value.forEach(item => {
			item.forEach((cItem) => {
				cItem.child.forEach(fItem => {
					fItem.checked = false;
				})
			})
		})
		emit('change', {
			value: checkVal.value
		})
	}

	const childChange = (cItem) => {
		if (!cItem.checked) {
			cItem.checked = true;
			let key = dataList.value[tabIndex.value][currentIndex.value].key;
			checkVal.value.push({
				key,
				...cItem
			})
		} else {
			cItem.checked = false;
			checkVal.value.some((item, index) => {
				if (item.dictValue == cItem.dictValue) {
					checkVal.value.splice(index, 1);
					return true;
				}
			})
		}
		emit('change', {
			value: checkVal.value
		})
	}

	const reset = () => {
		checkVal.value = [];
		dataList.value.forEach((item) => {
			item.forEach((cItem) => {
				cItem.child.filter(fItem => fItem.checked = false)
			})
		})
		emit('change', {
			value: checkVal.value
		})
	}

	const confirm = () => {
		emit('confirm', {
			value: checkVal.value
		})
		close();
	}
	
	const checkFun = (data) => {
		dataList.value.forEach((item) => {
			item.forEach((cItem) => {
				if(cItem.key == data.key) {
					cItem.child.forEach(fItem => {
						if(fItem.dictLabel == data.dictLabel) {
							fItem.checked = true;
						}
					})
				}
				
			})
		})
	}


	// 抛出函数
	defineExpose({
		open,
		clearCheck,
		checkFun
	})
</script>

<style lang="scss">
	.main {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99;
	}

	.option_box {
		padding: 10rpx 0;
		box-sizing: border-box;
	}

	.footer {
		width: 100%;
		height: 90rpx;
		display: flex;

		.btn_item {
			width: 50%;
			line-height: 90rpx;
			text-align: center;
			background: linear-gradient(180deg, #4072FE 0%, #0034C7 100%);
		}
	}

	.class_left {
		width: 256rpx;
		border-right: 1rpx dashed #CCCCCC;

		.option {
			text-align: center;
			box-sizing: border-box;
			padding: 20rpx 0;

			&.active {
				font-weight: bold;
				color: #4072FE;
			}
		}
	}

	.class_right {
		flex: 1;
		padding-left: 84rpx;
		box-sizing: border-box;

		.option {
			box-sizing: border-box;
			padding: 20rpx 0;

			.gui-icons {
				margin-left: 20rpx;
			}

			&.active {
				font-weight: bold;
				color: #4072FE;
			}
		}
	}

	.tab {
		height: 80rpx;
		line-height: 80rpx;
		border-bottom: 1rpx solid #F5F5F5;

		.tab_item {
			flex: 1;
			text-align: center;
		}
	}

	.zw_20 {
		background-color: #f8f9fd;
		height: 10rpx;
	}

	.shai {
		padding: 20rpx 10rpx 14rpx 36rpx;

		.la {
			position: relative;
			top: -4rpx;
		}

		.label-item {
			padding: 6rpx 14rpx;
			background: #F5F5F5;
			border-radius: 14rpx;
			margin-left: 10rpx;
			margin-bottom: 10rpx;
		}

		.tool {
			position: relative;
			top: -4rpx;

			.tool-text {
				position: relative;
				padding: 6rpx 15rpx;

				&:last-child::before {
					content: "";
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 1px;
					height: 24rpx;
					background: #D50000;
				}
			}
		}
	}

	.heightTran {
		overflow: hidden;
		transition: all 0.3s;
		/* 指定要应用过渡效果的属性 */
	}

	.noHei {
		max-height: 0;
	}
</style>